<template>
  <div class="relicList">
    <div class="filterHead">
        <div class="title">
            <span>文物管理 | 文物列表</span>
        </div>
        <div class="filter_input">
            <input type="text" v-model="relicName" placeholder="请输入文物名称查找" @keyup.enter="handleEnterKey">
            <button class="filter_button" @click="filterRelic">查找</button>
        </div>
    </div>
    <div class="table_box" v-if="total" >
        <div class="table_title">
            <div class="table_title_info">文物号</div>
            <div class="table_title_info">文物名称</div>
            <div class="table_title_info">文物类型</div>
            <div class="table_title_info">文物年代</div>
        </div>
        <div class="table_item" 
            @mouseenter="enterTable(index)" 
            @mouseleave="leaveTable(index)" 
            v-for="(item,index) in currentPageData" 
            :key="index">
        <div class="table" ref="table">
            <div class="table_info">{{ item.rid }}</div>
            <div class="table_info">{{ item.name }}</div>
            <div class="table_info">{{ item.groupType }}</div>
            <div class="table_info">{{ item.decadeType }}</div>
        </div>
        <button class="delButton" ref="delButton" @click="deleteConfirm(item)">删除</button>
        <button class="updateButton" ref="updateButton" @click="updateRelic(item)">编辑</button>
      </div>
    </div>
    <el-pagination
      v-if="total" 
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="pageSize"
      layout="prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <div v-else class="empty">
          暂无文物信息
   </div>
  </div>
</template>
  
  <script>
import {findAllRelic,findRelicByName,deleteRelic} from "@/api/admin"
import { Message } from 'element-ui';
export default {
  name: "relicList",
  data(){
    return {
        relicList:[],
        pageSize:30, //每页显示条数
        total:0,//总条数
        currentPageData: [], // 当前页显示的数据
        currentPage: 1,// 当前显示的页码，默认为第一页
        relicName:""
    }
  },
  mounted(){
    this.init();
  },
  methods:{
    handleEnterKey() {
           this.filterRelic();
        },
    deleteConfirm(item){
            this.$confirm('确认要删除该文物吗？记录删除后将不可恢复', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              customClass:'set_custom_class',
              closeOnClickModal: false,
              type: 'warning'
            }).then(() => {  
             this.deleteRelic(item);
            }).catch(() => {
              Message.info("已取消")       
            });
    },
    async deleteRelic(item){
      let params={
          rid:item.rid,
          name:item.name,
          groupType:item.groupType,
          localType:item.localType,
          decadeType:item.decadeType,
          image:item.image,
          types:item.types,
          pattern:item.pattern,
          technology:item.technology,
      }
      await deleteRelic(params).then((res)=>{
        if(res.data.code===200){
          Message.success("删除成功！")
          window.location.reload();
        }
      }).catch((error)=>{
      console.log(error)
      })
    },
    updateRelic(item){
      this.$router.push({ 
          name: 'relicUpdate' ,
          query:{relic:JSON.stringify(item)}
         }); 
    },
    enterTable(index){
      this.$refs.table[index].style.transform="translateX(-10px)";
      this.$refs.delButton[index].style.transform="translateX(-10px)";
      this.$refs.updateButton[index].style.transform="translateX(-10px)";
      this.$refs.delButton[index].style.display="flex"
      this.$refs.updateButton[index].style.display="flex"
    },
    leaveTable(index){
      this.$refs.table[index].style.transform="translateX(0px)";
      this.$refs.delButton[index].style.transform="translateX(0px)";
      this.$refs.delButton[index].style.display="none"
      this.$refs.updateButton[index].style.transform="translateX(0px)";
      this.$refs.updateButton[index].style.display="none"
    },
    async init(){
        await findAllRelic().then((res)=>{
            if(res.data.code===200){
                this.relicList=res.data.data.relicList
              
            }
        }).catch((error)=>{
            console.log(error)
        })
        this.currentPageData=this.relicList.slice(0,1*this.pageSize)  
        this.total=this.relicList.length;
        console.log(`当前页数据`,this.currentPageData);
    },
    handleCurrentChange(val) {
        this.currentPageData=this.relicList.slice((val-1)*this.pageSize,val*this.pageSize);//把每页的数据传给子组件
        console.log(`当前页: ${val}`);
        console.log(`当前页数据`,this.currentPageData);
    },
    async filterRelic(){
    let params={
        relicName:this.relicName
    }
    await findRelicByName(params).then((res)=>{
        if(res.data.code===200){
                this.relicList=res.data.data.relicList
                this.currentPageData=this.relicList.slice(0,1*this.pageSize)  
                this.total=this.relicList.length;
            }
    }).catch((error)=>{
        console.log(error)
    })
    }
  }
};
</script>
  
<style scoped>
.relicList{
    min-height:100vh;
    background: #EBEBEB;
}
.table_box{
    margin-top: 0;
    font-family: "STKaiti";
    font-size: 20px;
    box-sizing: border-box;
}
.table_box .table_title{
    font-weight: bold;
    display: flex;
    height: 45px;
    background: #666666;
    overflow: hidden;
    border-radius: 5px;
}
.table_box .table_title .table_title_info{
    flex:1;
    font-size: 20px;
    color: #fff;
    font-weight: bold;
    line-height:45px ;
    box-sizing: border-box;
    padding:0 15px;
}
.table_box .table_title .table_title_info:nth-child(2){
    flex:4;
}
.table_box .table_title .table_title_info:nth-child(4) {
    flex: 1;
    text-align: right;
    }
.table{
    flex:4;
    display: flex;
    background: #fffcfc;
    border-radius: 5px;
    margin-top:10px ;
    transition: all 0.4s;
}
.table_info {
    flex: 1;
    font-size: 20px;
    color: #333;
    font-weight: normal;
    padding: 10px 10px;
    box-sizing: border-box;
    line-height: 30px;
}
.table_info:nth-child(2) {
    font-size: 20px;
    flex:4;
}
.table_info:nth-child(4) {
    flex: 1;
    text-align: right;
}
.table_item{
  display: flex;
}
button:hover{
cursor: pointer;
}
.delButton,
.updateButton{
  vertical-align: middle;
  margin-top: 10px;
  width:120px;
  height:50px;
  border: 1px solid #cbcaca;
  color:#fff;
  display: none;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.delButton{
  margin-left:10px;
  background:rgba(156,10,10,0.9);
  border-right-style: none;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.updateButton{
  background:rgba(42,81,77, 1);
  border-left-style: none;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.filterHead{
    display: flex;
    justify-content: space-between;
    height:50px;
    line-height: 50px;
    color:#666666;
    margin-bottom: 20px;
  }
  .title{
    flex: 3;
    font-size: 18px;
    min-width: 200px;
    padding-left:10px;
  }
  .filter_input{
    flex: 1;
    min-width: 400px;
    flex-wrap: nowrap;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    color:#757474;
    position: relative;
  }
  .filter_input input{
    width:280px;
    height:35px;
    padding:4px;
    border:1px solid rgba(42,81,77, 0.7);
    border-radius: 5px;
    background: #eae8e8;
    color:#535252;

  }
  .filter_button{
    color:#fff;
    width:50px;
    height:36px;
    border-radius: 2px;
    /* border-top-left-radius: 0px;
    border-bottom-left-radius: 0px; */
    background:rgba(42,81,77, 1);
    position:absolute;
    top:5px;
    left:230px;
    border:1px solid #9e9d9d;
  }

  .empty{
height: 500px;
text-align: center;
line-height: 500px;
color:#666666;
font-size:20px;
}
</style>